<template>
	<view class="content">
		<uni-swiper-dot :info="zhenyingList" :current="current" field="content" :mode="mode" class="uni-swiper-dot-box"
			:dots-styles="dotsStyles">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item ,index) in zhenyingList" :key="index">
					<view class="swiper-item">
						<image :src="item.img" class="zhenying-img"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="sure-btn" @click="sureZhenying">

		</view>
		<view class="mark-box animated fadeIn" :class="chooseZhenyingBG(current)" v-if="yaoqingShow">
			<image :src="'../../static/zhenying/'+current+'/richeng.png'" class="richeng"></image>
			<view class="button-team">
				<image :src="'../../static/zhenying/'+current+'/home.png'" class="home-btn" @click="gotoHome"></image>
				<image :src="'../../static/zhenying/'+current+'/yaoqing.png'" class="yaoqing-btn" @click="yaoqing">
				</image>
			</view>
		</view>

		<view class="yaoqinghaibao-box" v-if="haibaoShow">
			<image :src="piaoSrc" class="zuizhonghaibao"></image>
			<text class="tips-txt">长按或截图分享</text>
			<text class="tips-txt">即可邀请好友加入阵营</text>
			<view class="back-btn" @click="quitHaibao">
				<image :src="'../../static/zhenying/'+current+'/back.png'" class="pic"></image>
			</view>
		</view>
		<uqrcode ref="uQRCode" :text="fenxiangdizhi" class="erweima" />
		<canvas canvas-id="canvas" id="canvas" style="width:538px; height:696px;" class="canvas-hide" />
	</view>
</template>

<script>
	import DrawPoster from '../../components/u-draw-poster/index.js'
	export default {
		data() {
			return {
				name:'',
				wwid:'',
				userID:'',
				fenxiangdizhi:'',
				piaoSrc: '',
				haibaoShow: false,
				yaoqingShow: false,
				current: 0,
				swiperDotIndex: 0,
				mode: 'round',
				erweima:'',
				dotsStyles: {
					width: 8,
					bottom: 0,
					backgroundColor: 'rgba(255,255,255,0.4)',
					border: 'none',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255,255,255,1)',
					selectedBorder: 'none'
				},
				zhenyingList: [{
						id: '创新',
						img: require('../../static/zhenying/chuangxin.png'),
						flag: 1
					},
					{
						id: '团队',
						img: require('../../static/zhenying/tuandui.png'),
						flag: 2
					},
					{
						id: '专业',
						img: require('../../static/zhenying/zhuanye.png'),
						flag: 3
					},
					{
						id: '准入',
						img: require('../../static/zhenying/zhunru.png'),
						flag: 4
					}
				]
			}
		},
		onShow() {
			this.name = uni.getStorageSync('name')
			this.wwid = uni.getStorageSync('wwid')
			this.userID = uni.getStorageSync('userID')
			this.fenxiangdizhi = 'http://win.v2code.cn/#/pages/fenxiang/fenxiang?userID='+this.userID
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
				console.log('当前显示阵营的index', this.current)
			},
			sureZhenying() {
				this.yaoqingShow = true
				console.log('选择的阵营', this.zhenyingList[this.current])
				this.fenxiangdizhi = this.fenxiangdizhi+'&current='+this.current+'&zhenying='+this.zhenyingList[this.current].id
				console.log(this.fenxiangdizhi)
			},
			chooseZhenyingBG(index) {
				switch (index) {
					case 0:
						return 'bg0'
						break;
					case 1:
						return 'bg1'
						break;
					case 2:
						return 'bg2'
						break;
					case 3:
						return 'bg3'
						break;
					default:
						break;
				}
			},
			gotoHome() {
				this.yaoqingShow = false
				this.fenxiangdizhi = 'http://win.v2code.cn/#/pages/fenxiang/fenxiang?userID='+this.userID
			},
			async yaoqing() {
				console.log('邀请阵营', this.zhenyingList[this.current])
				this.haibaoShow = true
				this.$refs.uQRCode.toTempFilePath({
					success: res => {
						console.log(res)
						this.erweima = res
						
						
					}
				})
				
				
				const dp = await DrawPoster.build("canvas")
				dp.canvas.width = 538
				dp.canvas.height = 696
				dp.draw(async (ctx) => {
					await ctx.drawImage('/static/zhenying/'+this.current+'/qrcode-bg.png', 0, 0, 538, 696);
				})
				dp.draw(async (ctx) => {
					console.log('this.erweima',this.erweima)
					await ctx.drawImage(this.erweima.tempFilePath, 347, 530, 126, 126);
				})
				const result = await dp.awaitCreate();
				console.log("draw绘制状况:", result);
				let posterImgUrl = await dp.createImagePath();
				console.log("绘制生成本地地址:", posterImgUrl);
				this.piaoSrc = posterImgUrl
				
			},
			
			quitHaibao(){
				this.haibaoShow = false
				this.piaoSrc = ''
			}
		}
	}
</script>

<style scoped lang="scss">
	.canvas-hide {
		position: fixed;
		right: 100vw;
		bottom: 100vh;
		z-index: -9999;
		opacity: 0;
		letter-spacing: 5px;
	}

	page {
		background: url(../../static/zhenying/bg3.jpg) no-repeat center top;
		background-size: 100% auto;
	}

	.uni-swiper-dot-box {
		width: 750rpx;
		margin: 0 auto;
		margin-top: 296rpx;
	}

	.swiper-box {
		height: 768rpx;
		width: 100%;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 768rpx;
		color: #fff;
	}

	.zhenying-img {
		width: 700rpx;
		height: 768rpx;
	}

	.sure-btn {
		width: 366rpx;
		height: 136rpx;
		background: url(../../static/zhenying/sure.png) no-repeat center center;
		background-size: 100% 100%;
		margin-top: 22rpx;
	}

	.mark-box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bg0 {
		background: url(../../static/zhenying/0/bg0.jpg) no-repeat center top;
		background-size: 100% auto;
	}

	.bg1 {
		background: url(../../static/zhenying/1/bg0.jpg) no-repeat center top;
		background-size: 100% auto;
	}

	.bg2 {
		background: url(../../static/zhenying/2/bg0.jpg) no-repeat center top;
		background-size: 100% auto;
	}

	.bg3 {
		background: url(../../static/zhenying/3/bg0.jpg) no-repeat center top;
		background-size: 100% auto;
	}

	.richeng {
		width: 664rpx;
		height: 846rpx;
		margin-top: 186rpx;
	}

	.button-team {
		margin-top: 36rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.home-btn {
		width: 294rpx;
		height: 110rpx;
		margin: 0 20rpx;
	}

	.yaoqing-btn {
		width: 294rpx;
		height: 110rpx;
		margin: 0 20rpx;
	}


	.yaoqinghaibao-box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 10;
		background: rgba(0, 0, 0, 0.5);
	}

	.erweima {
		opacity: 0;
		// transform: scale(0.1);
		position: fixed;
		top: 0;
		left: 0;
		z-index: -90;
	}
	.zuizhonghaibao{
		width: 538rpx;
		height: 696rpx;
		margin-top: 130rpx;
	}
	.tips-txt{
		font-size: 30rpx;
		color: #fff;
		line-height: 40rpx;
	}
	.tips-txt:nth-of-type(1){
		margin-top: 46rpx;
	}
	.back-btn{
		width: 294rpx;
		height: 110rpx;
		margin-top: 64rpx;
	}
	.pic{
		width: 100%;
		height: 100%;
		display: block;
	}
</style>
